<template>
  <div class="basic-drawer-footer" :style="getStyle" v-if="showFooter || $slots.footer">
    <template v-if="!$slots.footer">
      <a-space :size="8">
        <slot name="insertFooter"></slot>
        <a-button v-bind="cancelButtonProps" @click="handleClose" v-if="showCancelBtn">
          {{ cancelText }}
        </a-button>
        <slot name="centerFooter"></slot>
        <a-button :type="okType" @click="handleOk" v-bind="okButtonProps" :loading="confirmLoading" v-if="showOkBtn">
          {{ okText }}
        </a-button>
        <slot name="appendFooter"></slot>
      </a-space>
    </template>

    <template v-else>
      <slot name="footer"></slot>
    </template>
  </div>
</template>
<script lang="ts">
import type { CSSProperties } from 'vue'
import { defineComponent, computed } from 'vue'

import { footerProps } from '../props'
export default defineComponent({
  name: 'BasicDrawerFooter',
  props: {
    ...footerProps,
    height: {
      type: String,
      default: '56px'
    }
  },
  emits: ['ok', 'close'],
  setup(props, { emit }) {
    const getStyle = computed((): CSSProperties => {
      const heightStr = `${props.height}`
      return {
        height: heightStr,
        lineHeight: `calc(${heightStr} - 1px)`
      }
    })

    function handleOk() {
      emit('ok')
    }

    function handleClose() {
      emit('close')
    }
    return { handleOk, handleClose, getStyle }
  }
})
</script>

<style lang="less" scoped>
.basic-drawer-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 16px;
  text-align: right;
  background-color: #fff;
  box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.14);
  border-radius: 0px 0px 2px 2px;
  :deep(.ant-btn) {
    padding: 4px 30px;
  }
}
</style>
